<template>
  <form action="" style="margin: 20px">
    <p @click="tag" :style="{ width: w, height: h, backgroundColor: bgc }"></p>
    <input type="button" value="红" @click="tag('red')" />
    <input type="button" value="黄" @click="tag('yellow')" />
    <input type="button" value="蓝" @click="tag('blue')" />
  </form>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {
  setup () {
    const state = reactive({
      h: '200px',
      w: '200px',
      bgc: 'red'
    })

    const tag = (str) => { state.bgc = str }

    return {
      ...toRefs(state),
      tag
    }
  }
}
</script>
